<template>
<div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <!-- 表单领域 -->
        <el-form :model="form" >
          <el-form-item label='关键字' label-width="80px">
            <el-input v-model="form.id"  placeholder='根据编号搜索'></el-input>
            <div class="btn">
              <el-button @click='reset'>清除</el-button>
            <el-button type='primary' @click='search'>搜索</el-button>
            </div>
          </el-form-item >
        </el-form>
        <!-- 提示文本 -->
        <div role="alert" class="el-alert alert el-alert--info is-light" style="margin-bottom: 15px;"><i class="el-alert__icon el-icon-info"></i><div class="el-alert__content"><span class="el-alert__title">数据一共 {{total}} 条</span><!----><!----><i class="el-alert__closebtn el-icon-close" style="display: none;"></i></div></div>
          <!-- 表单table -->
          <el-table :data="tableData" style="width: 100%">
            <el-table-column label='编号' prop='id' width='220'></el-table-column>
            <el-table-column label='题型' prop='questionType' width="80"></el-table-column>
            <el-table-column label='题目编号' prop='questionIDs' width='240' >
              <template #default='{row}'>
              <div class="cnm">
                <a @click.prevent="opdetail(item)" v-for='(item,index) in row.questionIDs' :key='index'>{{item.number}}</a>
              </div>
              </template>
            </el-table-column>
            <el-table-column label='录入时间' prop='addTime' width="200" ></el-table-column>
            <el-table-column label='答题时间(s)' prop='totalSeconds' ></el-table-column>
            <el-table-column label='正确率(%)' prop='accuracyRate' ></el-table-column>
            <el-table-column label='录入人' prop='userName' ></el-table-column>
            <el-table-column label='操作' width='80' >
               <template #default="{row}">
                <button type="button" class="el-button el-button--danger el-button--small is-plain is-circle">
                  <i class="el-icon-delete"  @click="open(row)" ></i>
                </button>
                </template>
            </el-table-column>
          </el-table>
          <!-- 分页 -->
            <el-pagination
            background
       @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="page"
      :page-sizes="[10, 12, 15, 20]"
      :page-size="pagesize"
      layout="  prev, pager, next,sizes ,jumper"
      :total="total">
    </el-pagination>
    <!-- 回显 -->
    <el-dialog
  title="题目预览"
  :visible.sync="dialogVisible"
  width="53%"
  @close='closeDig'
  :before-close="handleClose">
  <button type="button" @click="dialogVisible = false" aria-label="Close" class="el-dialog__headerbtn"><i class="el-dialog__close el-icon el-icon-close"></i></button>
  <div class="dialog-body">
    <div class="el-row">
      <div class="el-col el-col-6 ">【题型】：{{detailList.questionType}}</div>
      <div class="el-col el-col-6 ">【编号】：{{detailList.id}}</div>
      <div class="el-col el-col-6 ">【难度】：{{detailList.difficulty}}</div>
      <div class="el-col el-col-6 ">【标签】：{{detailList.tags}}</div>
      <div class="el-col el-col-6 ">【学科】：{{detailList.subjectName}}</div>
      <div class="el-col el-col-6 ">【目录】：{{detailList.directoryName}}</div>
      <div class="el-col el-col-6 ">【方向】：{{detailList.direction}}</div>
    </div>
    <hr>
     【题干】：
     <div style="color: blue;"><p>{{detailList.question}}</p></div>
     <!-- 单选 -->
     <div type='onlyone' v-if="detailList.questionType==='单选题'">
      <div   style="padding-bottom: 5px;">单选题 选项：（以下选中的选项为正确答案）</div>
      <!-- 单选 -->
      <div class="onlyone" v-for='item in detailList.options' :key='item.id'>
        <el-radio :label="1" v-model="item.isRight" >{{item.title}}</el-radio>
      </div>
     </div>
     <!-- 多选 -->
     <div type='more' v-else-if="detailList.questionType==='多选题'">
      <div   style="padding-bottom: 5px;">多选题 选项：（以下选中的选项为正确答案）</div>
      <!-- 多选 -->
      <div class="morecheck" v-for='item in detailList.options' :key='item.id'>
        <el-Checkbox :checked='item.isRight'>{{item.title}}</el-Checkbox>
      </div>
     </div>
     <!-- 简答 -->
     <div type='more' v-else-if="detailList.questionType==='简答题'">
      <!-- 简答部分 -->
      <div class="easy" >
      </div>
     </div>
     <hr>
      【参考答案】：
      <button @click='openVideo' type="button" class="el-button el-button--danger el-button--small"><!----><!----><span>视频答案预览</span></button>
      <div  class="video" style="display: none;"><video  controls="controls" :src="detailList.videoURL"></video></div>
      <hr>
   【答案解析】：
   <div data-v-61b2ab32="" style="display: inline-block;" v-html="detailList.answer"></div>
   <hr>
  【题目备注】
    <div style="display: inline-block;" v-html="detailList.remarks">：</div>
  </div>
  <span slot="footer" class="dialog-footer">
    <el-button type="primary" @click="closeDig()">关闭</el-button>
  </span>
</el-dialog>
      </el-card>
    </div>
  </div>
</template>

<script>
import { randoms, removeRandoms, detail } from '@/api/hmmm/questions'
export default {
  async created () {
    this.initData()
  },
  data () {
    return {
      dialogVisible: false,
      page: 1,
      pagesize: 10,
      total: 0,
      tableData: [],
      list: [],
      detailList: [],
      flag: true,
      questionIDs: '',
      form: {
        id: ''
      }

    }
  },
  methods: {
    closeDig () {
      const v1 = document.querySelector('.video')
      v1.style.display = 'none'
      this.dialogVisible = false
    },
    openVideo () {
      const v1 = document.querySelector('.video')
      v1.style.display = 'block'
    },
    async opdetail (id) {
      this.dialogVisible = true
      const { data } = await detail(id)
      console.log(data)
      this.detailList = data

      if (this.detailList.difficulty === 1) {
        this.detailList.difficulty = '简单'
      } else if (this.detailList.difficulty === '2') {
        this.detailList.difficulty = '普通'
      } else if (this.detailList.difficulty === '3') {
        this.detailList.difficulty = '困难'
      }

      if (this.detailList.questionType === '1') {
        this.detailList.questionType = '单选题'
      } else if (this.detailList.questionType === '2') {
        this.detailList.questionType = '多选题'
      } else if (this.detailList.questionType === '3') {
        this.detailList.questionType = '简答题'
      }
    },
    handleClose (done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          this.closeDig()
          done()
        })
        .catch(_ => {})
    },
    search () {
      // const searchA = this.form.id
      // const newList = []
      // if (searchA) {
      //   this.tableData.filter((item) => {
      //     if (item.id.indexOf(searchA) !== -1) {
      //       newList.push(item)
      //     }
      //   })
      //   this.tableData = newList
      // } else if (searchA === '') {
      //   this.initData()
      // }
      this.page = 1
      this.initData()
    },
    reset () {
      this.form.id = ''
    },
    open (id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.del(id)
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
      })
    },
    handleSizeChange (val) {
      this.pagesize = val
      this.initData()
    },
    handleCurrentChange (val) {
      this.page = val
      this.initData()
    },
    async del (id) {
      await removeRandoms(id)
      if (this.tableData.length === 1 && this.page > 1) {
        this.page--
      }
      this.initData()
    },
    async initData () {
      const { data } = await randoms({ page: this.page, pagesize: this.pagesize, keyword: this.form.id })
      //
      // console.log(data)
      this.tableData = data.items
      this.total = data.counts
      this.tableData.map((val) => {
        if (val.questionType === '1') {
          val.questionType = '单选'
        } else if (val.questionType === '2') {
          val.questionType = '多选'
        } else {
          val.questionType = '简答'
        }
      })
    }
  }
}
</script>

<style scoped lang='scss'>
   .el-input{
    width: 282px;
    background-image: none;
    color: #606266;
    ::v-deep .el-input__inner{
      height: 32px;
    line-height: 32px;
    }
  }
  .btn{
    float: right;
  }
  .cnm{
    color:blue;
    a{
      display: block;
    }
  }
  .el-col{
    padding: 10px 0;
  }
  .el-col-6{
    width: 25%;
  }
  .el-dialog__footer{
    .el-button{
      position: absolute;
      right: 15px;
      bottom: 20px;
    }
  }
  .el-pagination{
    margin-top: 20px;
    text-align: right;
  }

</style>
